<template>
  <nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex justify-between h-16">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="@/assets/logo.svg" alt="Logo" />
        </div>
        
        <!-- Desktop Menu -->
        <div class="hidden md:flex items-center">
          <router-link 
            v-for="item in navItems" 
            :key="item.path"
            :to="item.path"
            class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
          >
            {{ $t(item.title) }}
          </router-link>
        </div>

        <!-- Language Switcher -->
        <div class="flex items-center">
          <select 
            v-model="currentLocale" 
            @change="changeLocale"
            class="ml-4 form-select rounded-md"
          >
            <option value="en">English</option>
            <option value="zh">中文</option>
          </select>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()
const currentLocale = ref(locale.value)

const navItems = [
  { path: '/', title: 'nav.home' },
  { path: '/applications', title: 'nav.applications' },
  { path: '/resources', title: 'nav.resources' },
  { path: '/about', title: 'nav.about' },
  { path: '/contact', title: 'nav.contact' }
]

const changeLocale = (event: Event) => {
  const target = event.target as HTMLSelectElement
  locale.value = target.value
}
</script> 